<template>
    <div @click="addCircle" class="container">
        <div 
        v-for="(circle, index) in circles"
        :key="index"
        class="circle"
        :style="{left:circle.x + 'px', top:circle.y + 'px'}">
    </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'

const circles = ref([])

const addCircle = (event) => {
    // event参数带有我们点击事件的所有属性，包括点击的位置
    const newCircle = {
        x: event.clientX,
        y: event.clientY
    }
    circles.value.push(newCircle)
}
</script>

<style scoped>
.container {
    position:relative; /*relative：相对定位 */
    background-color: rgb(192, 192, 192);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
    width:100vw;
    height:100vh;
}
/* 使用 position: relative; 为 .container 创建了一个坐标系，
确保 .circle 可以在这个容器内部正确定位。
使用 position: absolute; 使得每个圆圈可以在这个容器中自由定位，而不会影响其他元素的布局。
这样，就能实现点击生成圆圈并在容器中正确显示的效果。 */
.circle{
    position:absolute; /*relative：绝对定位 */
    width:50px;
    height:50px;
    background-color: rgba(211, 90, 82, 0.741);
    border-radius: 50%;
}
</style>